<template>
  <div>
    <!--    头部-->
<el-header>
  <el-row style="box-shadow: 0 0 10px rgba(0, 0, 0,0.2);height: 30px">
    <!-- 个人信息链接 -->
    <el-col :span="12" style="text-align: center;">
      <el-link :underline="false" href="/personHome" style="font-size: 20px">个人信息</el-link>
    </el-col>
    <!-- 购物车链接 -->
    <el-col :span="12" style="text-align: center;">
      <el-link :underline="false" href="/shopping" style="font-size: 20px">购物车</el-link>
    </el-col>
  </el-row>

  <el-aside>
    <el-table :data="categories">
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column prop="subcategoryName" label="子分类名称" />
      <el-table-column prop="specificItem" label="具体项目" />
    </el-table>

  </el-aside>

</el-header>

    <el-main>
      <div class="search-container">
        <select v-model="category" class="category-select-inline">
          <option value="商家">商家</option>
          <option value="商品">商品</option>
        </select>
        <input type="text" v-model="SearchText" class="custom-search-box" placeholder="请输入搜索商品名称" />
        <button type="button" @click="handleSearch" class="search-button">搜索</button>
      </div>

      <el-carousel indicator-position="outside"  style="width: 100%; height: 350px">
        <el-carousel-item v-for="item in imgArray" :key="item">
          <img :src="item" class="rightImg" alt="这是一个图片的描述">
        </el-carousel-item>
      </el-carousel>
      <div class="product-container">
       <div v-for="(product, index) in products" :key="index" class="product-box">
         <img :src="require(`@/assets/${product.image}`)" alt="产品图片" />
         <div class="product-description">{{ product.description }}</div>
         <div class="product-price">价格：{{ product.price }}</div>
       </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      categories:[],
      SearchText: '',
      category: '商品',
      imgArray: [
        require('../assets/1.jpg'),
        require('../assets/2.jpg'),
        require('../assets/3.jpg'),
        require('../assets/4.jpg')
      ],
      products: [
        {
          image: "1.jpg",
          description: "这是第一个产品，非常精美。",
          price: "$19.99"
        },
        {
          image: "2.jpg",
          description: "第二个产品，独具特色。",
          price: "$29.99"
        },
        {
          image: "3.jpg",
          description: "第三个产品，品质卓越。",
          price: "$39.99"
        },
        {
          image: "4.jpg",
          description: "第四个产品，设计新颖。",
          price: "$49.99"
        },
        {
          image: "5.jpg",
          description: "第五个产品，实用耐用。",
          price: "$59.99"
        },
        {
          image: "6.jpg",
          description: "第六个产品，性价比高。",
          price: "$69.99"
        },
        {
          image: "7.jpg",
          description: "第七个产品，时尚潮流。",
          price: "$79.99"
        },
        {
          image: "8.jpg",
          description: "第八个产品，高端大气。",
          price: "$89.99"
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      // 在这里编写搜索逻辑，比如发送请求获取搜索结果
      console.log('正在搜索：' + this.SearchText + '，分类：' + this.category);
    }
  },
  mounted() {
    axios.get('http://localhost:9090/getCategories')
        .then(response => {
          this.categories = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    document.body.style.overflow = "hidden";
  },
}
</script>

<style scoped>
.el-header{
  height: 10%!important;
  padding-left: 0;
  padding-right: 0;
}
.el-aside {
  min-height: 100%;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 30px;  /* 考虑到头部的高度，将侧边栏从头部下方开始显示 */
  width: 300px!important;  /* 根据您的需求调整侧边栏宽度 */
}

.el-main {
  margin-left: 300px;  /* 为侧边栏留出空间 */
  padding-top: 0;  /* 与头部的间距保持一致 */
  padding-left: 0;
}
.search-container {
  width: 100%;
  height: 50px;
  border: 3px solid orange;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

.category-select-inline {
  width: 150px;  /* 调整选择框的宽度，使其能够显示完整 */
  height: 48px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  text-align: center;
  background-color: bisque;
}

.custom-search-box {
  flex: 1;  /* 让搜索输入框占据剩余的空间 */
  height: 50px;
  border: 3px solid orange;
  border-radius: 10px;
  font-size: 25px;
}

.search-button {
  width: 100px;  /* 固定搜索按钮的宽度 */
  height: 48px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  background-color: orange;
}
.el-carousel {
  justify-content: center;
  align-items: center;
}
.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1;
  height: 350px;
}
.rightImg {
  width: 100%;
  height: 350px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 350px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.product-container {
  display: flex;
  flex-wrap: wrap;
}
.product-box {
  width: 25%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 50px;
}

.product-box img {
  width: 100%;
  height: 150px;
}
.product-price {
  font-weight: bold;
  margin-top: 5px;
}
</style>